<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数节流</title>
</head>
<body>

    <button>拼命点我</button>
    <script>
        //解决什么问题,一般定义的函数,大多数情况由用户触发,用户一般不会频繁触发
        // 比如点击,等等  一般不会频繁点击.
        // 但是有一些情况函数可能会被频繁触发,比如 window的onresize 
        // 或者mousemove等事件

        //节流的原因:在于需要忽略一些频繁的情况,在规定时间内只允许触发一次
        // 多久一次 ,如果已经触发过了.后续触发,不再执行

        //代码实现1

        /* 不断点击button按钮会一直触发,限制没500ms只能触发一次 */

        /* 粗略方案: 使用一个标识用来标记是否能够继续触发事件 */

        /* ⭐ */

        let btn = document.querySelector('button')
        const fn = function() {
            console.log('开始执行');
        }
        let flag = true  // 刚开始能操作
        btn.addEventListener('click', function() {
            //增加标识限制
            if(flag)  {
                 fn()
                // 先设定为false
                flag =  false
                // 过500ms将表示改为true
                setTimeout(function() {
                    flag = true
                },500)
            }
           

        })

        




    </script>
</body>
</html>